import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Autoplay } from 'swiper'
import 'swiper/css';
import 'swiper/css/pagination';
import { Badge } from 'antd';

const BannerSwiper = (props) => {
  const { data } = props
  return (
    <Swiper
      modules={[Pagination, Autoplay]}
      pagination={{ clickable: true }}
      autoplay={{
        delay: 1200,
        disableOnInteraction: false,
      }}
      loop
    >
      {
        data.map((item) => (
          <SwiperSlide key={item.bannerid}>
            <Badge.Ribbon text={item.flag ? 'Hippies' : 'wuwu'} color={item.flag ? 'green' : 'red'}>
              <img style={{ width: '99%', height: '100%' }} src={item.img} alt={item.alt} />
            </Badge.Ribbon>
          </SwiperSlide>
        ))
      }
    </Swiper>
  )
}
export default BannerSwiper
